<!-- SPDX-License-Identifier: Apache-2.0 -->

<!DOCTYPE html>
<html>
  <head>
    <!-- <title>Hyperledger Fabric Tuna Application</title> -->
    <title>Hyperledger Fabric Agricultural Application</title>
    <link rel="icon" href="favicon.png" type="image/gif">

    <!-- require jquery and bootstrap scripts -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
    
    <!-- adding style here -->
    <style type="text/css">
      header{
        font-size:20px;
        padding:15px;
      }
      header, .form-group{
        margin-bottom: 3%;
      }
      .form-group{
        width:50%;
      }
      #body{
        margin-left:3%;
        margin-right:3%;
      }
      .form-control{
        margin: 8px;
      }
      #right_header{
        width:20%;
        font-size:15px;
        margin-right:0px;
      }
      #left_header{
        margin-left:0;
        width:40%;
        display:inline-block;
      } 
      #id {
        width:49%;
        display: inline-block;
      }
      table {
          font-family: arial, sans-serif;
          border-collapse: collapse;
          width: 100%;
      }
      td, th {
          border: 1px solid #dddddd;
          text-align: left;
          padding: 8px;
      }
      tr:nth-child(even) {
          background-color: #dddddd;
      }

      .cover {
        color: rgb(255, 255, 255);
        position: relative;
        min-height: 400px;
        background: url("img/customer-cover.png") no-repeat scroll 0px 100% / cover transparent;
        margin-bottom: 20px;
      }
    </style>
  </head>
  <body ng-app="application" ng-controller="appController">
    
      <div class="cover">
          <header style="background-color:white;opacity:0.8;">
              <div id="left_header" style="color: black; opacity:1 !important;">Agriculture Blockchain Application - Customer Page</div>
           
              <a class="btn btn-danger btn-md float-right rounded-0" style="position: absolute; right: 0;margin-right: 10px;opacity:1 !important;" href="/logout"
                role="button">Logout</a>
            </header>
      </div>

    <div id="body">
      <ul class="nav nav-tabs">
        <li class="active"><a data-toggle="tab" href="#menu2">Query All Product By Type</a></li>
        <li><a data-toggle="tab" href="#menu4">Change Product Holder</a></li>
        <li><a data-toggle="tab" href="#menu5">Consumer Trading</a></li>
      </ul>

          <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <img class="img img-responsive" id="my_image" style="display: block; margin-left: auto; margin-right: auto;" />
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
          </div>
        </div>
      </div>

      <div class="tab-content">
          <div id="menu2" class="tab-pane fade in active">
            <div class="form-group">
                <label>Query a Specific Product Harvest</label><br>
                <h5 style="color:red;margin-bottom:2%" id="error_query">Error: Please enter a valid Prudocut Type</h5>
                Enter a Product Type: <input id="createName" class="form-control" type="text" placeholder="Ex: 옥수수" ng-model="product_type">
                <input id="querySubmit" type="submit" value="Query" class="btn btn-primary" ng-click="queryAllProductByType()">
            </div>

            <table id="query_product" class="table" align="center">

                <tr>
                    <th>Product ID</th>
                    <th>Producing Area</th>
                    <th>Product Type</th>
                    <th>Product Unit</th>
                    <th>Unit Price</th>
                    <th>Quantity</th>
                    <th>Timestamp</th>
                    <th>Holder</th>
                    <th>Reference Image</th>
                </tr>
                <tr ng-repeat="query_product in query_products">
                  <td style="vertical-align:middle">{{query_product.Key}}</td>
                  <td style="vertical-align:middle">{{query_product.producing_area}}</td>
                  <td style="vertical-align:middle">{{query_product.product_type}}</td>
                  <td style="vertical-align:middle">{{query_product.product_unit}}</td>
                  <td style="vertical-align:middle">{{query_product.unit_price}}</td>
                  <td style="vertical-align:middle">{{query_product.quantity}}</td>
                  <td style="vertical-align:middle">{{query_product.timestamp}}</td>
                  <td style="vertical-align:middle">{{query_product.holder}}</td>
                  <td style="vertical-align:middle"><a href="" class="open-AddImgDialog" data-id="img/{{ query_product.image_reference }}" data-toggle="modal" data-target="#exampleModal"><img
                    src="img/{{ query_product.image_reference }}" alt="" style="width:50px; height:auto;"></a></td>
                </tr>
              </table>
          </div>
          <div id="menu4" class="tab-pane fade">
            <div class="form-group">
              <label>Change Product Holder</label><br>
              <h5 style="color:green;margin-bottom:2%" id="success_holder">Success! Tx ID: {{change_holder}}</h5>
              <h5 style="color:red;margin-bottom:2%" id="error_holder">Error: Please enter a valid Product Id</h5>
              Enter a catch id between 1 and 10: <input class="form-control" name="assetSelect" placeholder="Ex: 1" ng-model="holder.id">
              Enter New Holder Name: <input class="form-control" name="assetSelect" placeholder="Ex: Barry" ng-model="holder.name">
              <input id="transferSubmit" type="submit" value="Change" class="btn btn-primary" ng-click="changeHolder()">
            </div>
          </div>
          <div id="menu5" class="tab-pane fade"> 
              <div class="form-group">
                  <label>Query Agriculture Product</label><br>
                  <h5 style="color:red;margin-bottom:2%" id="error_consumer_query">Error: Please enter a valid Prudocut Type</h5>
                  Enter a Product Type: <input id="createName" class="form-control" type="text" placeholder="Ex: 옥수수" ng-model="consumer_product_type">
                  <input id="querySubmit" type="submit" value="Query" class="btn btn-primary" ng-click="consumerQueryAllProductByType()">
                </div>  

              <table id="query_product" class="table" align="center">
                  <tr>
                      <th></th>
                      <th>Product ID</th>
                      <th>Producing Area</th>
                      <th>Product Type</th>
                      <th>Product Unit</th>
                      <th>Unit Price</th>
                      <th>Quantity</th>
                      <th>Timestamp</th>
                      <th>Holder</th>
                      <th>Reference Image</th>
                  </tr>
                  <tr ng-repeat="query_product in consumer_query_products">
                      <td style="vertical-align:middle"><input type="checkbox" name="checkboxes" id="checkboxes-{{query_product.Key}}" value="{{query_product.Key}}"></td>
                      <td style="vertical-align:middle">{{query_product.Key}}</td>
                      <td style="vertical-align:middle">{{query_product.producing_area}}</td>
                      <td style="vertical-align:middle">{{query_product.product_type}}</td>
                      <td style="vertical-align:middle">{{query_product.product_unit}}</td>
                      <td style="vertical-align:middle">{{query_product.unit_price}}</td>
                      <td style="vertical-align:middle">{{query_product.quantity}}</td>
                      <td style="vertical-align:middle">{{query_product.timestamp}}</td>
                      <td style="vertical-align:middle">{{query_product.holder}}</td>
                      <td style="vertical-align:middle"><a href="" class="open-AddImgDialog" data-id="img/{{ query_product.image_reference }}" data-toggle="modal" data-target="#exampleModal"><img
                        src="img/{{ query_product.image_reference }}" alt="" style="width:50px; height:auto;"></a></td>
                  </tr>
                </table>

                <div class="form-group">
                  <input id="btnSelect" type="submit" value="선택상품주문" class="btn btn-primary" ng-click="">
                  <input id="btnCancel" type="submit" value="취소" class="btn btn-danger" ng-click="">
                </div>
                <br />
                <div class="form-group" style="margin:0 auto;">
                    <input id="btnPayment" type="submit" value="결재" class="btn btn-primary btn-lg btn-block" ng-click="">
                  </div>
            </div>

        </div>
    </div>
  </body>

  <script>
      // Get the image and insert it inside the modal - use its "alt" text as a caption
      $(document).on("click", ".open-AddImgDialog", function () {
        var imgsrc = $(this).data('id');
        $('#my_image').attr('src', imgsrc);
      });
    </script>
    <!-- requiring the angular page -->
    <script type="text/javascript" src="app.js"> </script>
</html>